<!-- subpkg_consult/payment/index.vue -->
<script lang="ts" setup>
  import { useConsultStore } from '@/stores/consult'
  import { createOrderApi, orderPayApi, preOrderApi } from '@/apis/order'
  import { ref } from 'vue'
  import { patientDetailApi } from '@/apis/patient'
  import type { OrderParams, OrderPreData, OrderPreParams, PayParams } from '@/types/order'
  import type { ConsultInfo, PatientItem, PatientParams } from '@/types/patient'
  const store = useConsultStore()
  // 判断是否已经生成过订单
  if (!store.patientId) {
    // 跳转到首页
    // 跳转到订单列表页面
    // reLaunch    先clear ，然后  replace
    // navigateTo  push  页面栈都存一条记录
    // redirectTo  replace  替换当前页面栈
    uni.reLaunch({
      url: '/pages/index/index',
      fail(err) {
        console.log(err)
      },
    })
    console.log(11)
  }

  const preOrderInfo = ref<OrderPreData>({} as OrderPreData)

  //#region 1 调用接口 获取预付订单信息 金额
  const getPreOrder = async () => {
    const params: OrderPreParams = {
      illnessType: store.illnessType,
      type: store.type,
    }
    const res = await preOrderApi(params)
    // console.log(res)
    preOrderInfo.value = res
  }
  getPreOrder()
  //#endregion

  //#region 2 在线获取患者信息
  const patientDetail = ref({} as PatientItem)
  const getpatientDetail = async () => {
    const res = await patientDetailApi(store.patientId)
    // console.log(res)
    patientDetail.value = res
  }
  getpatientDetail()
  //#endregion

  //#region 4 立即支付
  const customPaymentRef = ref()
  const onPayNow = () => {
    customPaymentRef.value?.open()
  }

  // 子组件点击了立即支付  支付流程
  const onChangePayChanneIndex = async (index: number) => {
    // console.log(index)
    // 判断是否是微信支付 不支持
    if (index === 0) {
      uni.showToast({ title: '暂时不支持微信支付', icon: 'none' })
      return
    }

    // 创建订单
    const orderParam: OrderParams = {
      // 1  找医生/极速问诊-是否就诊过0未就诊1就诊过
      consultFlag: store.illnessInfo.consultFlag,
      // 2 选择的科室id-极速问诊必填(选择的科室)
      depId: store.depId,
      // 3 病情--症状描述
      illnessDesc: store.illnessInfo.illnessDesc,
      // 4 找医生/极速问诊-患病时间1一周内2一月内3半年内4半年以上
      illnessTime: store.illnessInfo.illnessTime,
      // 5  极速问诊类型：0普通1三甲
      illnessType: store.illnessType,
      // 6 者id,用于关联患者信息
      patientId: store.patientId,
      // 7 补充病例信息-图片集合
      pictures: store.illnessInfo.pictures.map((v) => ({ id: v.id, url: v.url })),
      // 8 就诊类型1找医生 2极速问诊 3开药问诊默认是
      type: store.type,
    }
    const resOrder = await createOrderApi(orderParam)
    // 清空数据
    store.clear()

    // 得到订单id
    // console.log(resOrder)
    // 调用支付接口
    const payParams: PayParams = {
      // 订单id
      orderId: resOrder.id,
      //   支付成功跳转的页面，支付成功 跳转到页面(美寇跳转支付成功页面，现在：订单列表页面)
      payCallback: 'http://localhost:5173/#/subpkg_consult/room/index',
      // 支付方式
      paymentMethod: index.toString(),
    }
    // 调用支付接口成功 (把参数拼接给 传递支付宝官方，返回真正支付网页 - 我们返回的网页中 进行支付)
    const resPay = await orderPayApi(payParams)
    //  成功了的
    // resPay.payUrl // https://www.alipay.com..... 不是我们自己项目的页面
    // uni.navigateTo({url:"自己项目的页面"})
    // uni.navigateTo({url:resPay.payUrl})

    // 跳转到其他的网页，包括不是我们自己项目 跳百度、qq
    // location.href="http://www.baidu.com"
    location.href = resPay.payUrl // 跳转到支付宝的支付页面

    // 支付完成， 回跳到哪里去
  }

  // 调用支付接口

  //#endregion
</script>

<template>
  <scroll-page>
    <view class="payment-page">
      <uni-section
        title-font-size="32rpx"
        title-color="#121826"
        padding="30rpx"
        :title="`图文问诊 ${preOrderInfo.payment}元`"
      >
        <uni-list :border="false">
          <uni-list-item
            title="极速问诊"
            note="自动分配医生"
            thumb="/static/uploads/doctor-avatar.jpg"
            thumb-size="lg"
          />
          <uni-list-item
            title="优惠券"
            show-arrow
            :right-text="`-¥${preOrderInfo.couponDeduction}`"
          />
          <uni-list-item title="积分抵扣">
            <template #footer>
              <view class="uni-list-text-red"> -¥{{ preOrderInfo.pointDeduction }}</view>
            </template>
          </uni-list-item>
          <uni-list-item title="实付款">
            <template #footer>
              <view class="uni-list-text-red"> ¥{{ preOrderInfo.actualPayment }}</view>
            </template>
          </uni-list-item>
        </uni-list>
      </uni-section>
      <view class="dividing-line"></view>
      <!-- 患者资料 -->
      <uni-section title-font-size="32rpx" title-color="#121826" padding="30rpx" title="患者资料">
        <uni-list :border="false">
          <uni-list-item title="患者信息">
            <template #footer>
              <view class="uni-list-text-gray">
                {{ patientDetail.name }} | {{ patientDetail.genderValue }} |
                {{ patientDetail.age }}岁
              </view>
            </template>
          </uni-list-item>
          <uni-list-item border title="病情描述" :note="store.illnessInfo.illnessDesc" />
        </uni-list>
      </uni-section>
      <!-- <view class="payment-agreement">
        <radio color="#20c6b2" value="1" />
        我已同意<text style="color: #20c6b2">支付协议</text>
      </view> -->
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <view class="total-amount">
        合计: <text class="number">¥{{ preOrderInfo.actualPayment }}</text>
      </view>
      <button class="uni-button" @click="onPayNow">立即支付</button>
    </view>

    <!-- 弹出层 -->
    <custom-payment
      ref="customPaymentRef"
      :actualPayment="preOrderInfo.actualPayment"
      @change-pay-channeIndex="onChangePayChanneIndex"
    ></custom-payment>
  </scroll-page>
</template>

<style lang="scss">
  @import './index.scss';
</style>
